<template>
  <div>
    <goga-header :title="title">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
      <div class="cate-tab" slot="bottom">
        <div class="item"
            v-for="(item,index) in cate"
            :key="index"
            @click="currentCate=item.cate"
        >
          <span  v-bind:class="{active:item.cate=== currentCate}">{{item.name}}</span>
        </div>
      </div>
    </goga-header>
    <div class="cate-wrapper">
      <img v-if="category[currentCate]&&category[currentCate].list.length==0" class="loading" src="../../assets/loding.gif" alt="">
      <transition name="fade">
        <div class="cate-list" v-show="currentCate==='yzyg'" >
          <ul >
            <li>
              <router-link  class="cate-item"  v-for="(item,index) in category.yzyg.list" :to="{name:'goods',params:{id:item.goSn}}" :key="item.goSn">
                <div class="p-pic" v-lazy:background-image="'http://www.gogagoga.cc/picfile/'+item.goCover"></div>
                <div class="p-name">{{item.goName}}</div>
                <div class="p-subname">{{item.goAbout}}</div>
                <div class="p-price">¥{{item.goPrice}}元/{{item.unit}}</div>
              </router-link>
            </li>
          </ul>
        </div>
      </transition>
      <transition name="fade">
        <div class="cate-list" v-show="currentCate==='kzgh'" >
          <ul >
            <li>
              <router-link  class="cate-item"  v-for="(item,index) in category.kzgh.list" :to="{name:'goods',params:{id:item.goSn}}" :key="item.goSn">
                <div class="p-pic" v-lazy:background-image="'http://www.gogagoga.cc/picfile/'+item.goCover"></div>
                <div class="p-name">{{item.goName}}</div>
                <div class="p-subname">{{item.goAbout}}</div>
                <div class="p-price">¥{{item.goPrice}}元/{{item.unit}}</div>
              </router-link>
            </li>
          </ul>
        </div>
      </transition>
      <transition name="fade">
        <div class="cate-list" v-show="currentCate==='zxsg'" >
          <ul >
            <li>
              <router-link  class="cate-item"  v-for="(item,index) in category.zxsg.list" :to="{name:'goods',params:{id:item.goSn}}" :key="item.goSn">
                <div class="p-pic" v-lazy:background-image="'http://www.gogagoga.cc/picfile/'+item.goCover"></div>
                <div class="p-name">{{item.goName}}</div>
                <div class="p-subname">{{item.goAbout}}</div>
                <div class="p-price">¥{{item.goPrice}}元/{{item.unit}}</div>
              </router-link>
            </li>
          </ul>
        </div>
      </transition>
      <div v-if="category[currentCate]&& (category[currentCate].pageNum>category[currentCate].page)">
        <div class="cate-loading"v-if="loading" >
          <img src="../../assets/loading-min.gif" alt="">
        </div>
        <div class="cate-loadmore" >
          <button class="loadmore-btn" @click="loadMore">
            加载更多
          </button>
        </div>
      </div>
      <div class="cate-complete" v-if="category[currentCate]&& category[currentCate].pageNum!=0 && (category[currentCate].pageNum<=category[currentCate].page)">
        <img src="../../assets/min-logo.png" alt="">
      </div>
    </div>
    <footer-nav></footer-nav>
  </div>
</template>

<script lang="babel">
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import footerNav from '@components/footer-nav'
  import { mapGetters } from 'vuex'

  const fetchListData = async (store, {cate ,page}) => {
    await store.dispatch('backend/cateOld/getList', {cate ,page})
  }
  const addListData = async (store, {cate}) => {
    return store.dispatch('backend/cateOld/addList', {cate })
  }
  export default {
    components: {
      gogaHeader,
      Icon,
      footerNav
    },
    data () {
      return {
        title: '',
        currentCate: '',
        cate: [
          {
            name: '一周一果',
            cate: 'yzyg'
          },
          {
            name: '馈赠果盒',
            cate: 'kzgh'
          },
          {
            name: '自选水果',
            cate: 'zxsg'
          }
        ],
        loading: false
      }
    },
    computed: {
      ...mapGetters({
        category: 'backend/cateOld/category',
      })
    },
    mounted () {
      if(this.$route.query.hasOwnProperty('cate')) {
        this.currentCate = this.$route.query.cate;
      }
    },
    watch: {
      currentCate (newValue) {
        if(this.category[newValue].list.length === 0) {
          fetchListData(this.$store, {
            cate: newValue,
            page: 1
          })
        }
        let currentCate = this.cate.filter((item)=>{
          return item.cate === newValue
        })
        this.title = currentCate.length > 0 ? currentCate[0].name : ''
        this.$router.replace({name: 'fruit', query:{cate: newValue}})
      }
    },
    methods: {
      goBack () {
        this.$router.back()
      },
      loadMore() {
        let _this = this;
        this.loading = true;
        addListData(this.$store, {
          cate:this.currentCate
        })
          .then(function () {
            _this.loading = false;
          })
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>
